<template>
  <div class="app">
    <div class="sidebar">
      <mycard></mycard>
    </div>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import mycard from './mycard/mycard'
import { mapState, mapActions ,mapGetters } from 'vuex'
export default {
   components: {
     mycard
   },
   computed: {
   	    ...mapState([
            'user'
        ]),
        ...mapGetters([
            'searchedChatlist'
        ])
    },
   created () {
      this.getList()
      this.$store.dispatch('initData')
      
      
   },
   methods: {
     getList () {
       let params =  new FormData()
        params.append('memberId', this.user.memberId)
        this.$http.post('/index/getOfflineMsgFromRedis.do', params).then((res) => {
          // this.$store.commit('uId', res.data.message.member)
          if (res.status == '200') {
            this.$store.dispatch('receiveOfflineMessage', res.data)  
          }
        })
     },
   }
}
</script>

<style lang="stylus" scoped>
.app
  display: flex
  width: 100%
  min-height: 431px;
  height: 100%
  background-color: #fff
  .sidebar
    width: 200px
    height: 100%
    background: #2b2c2f
  .main
    width: 100%
    height: 100%
    flex: 1
    background: #ffffff
</style>

<style>
@media screen and (max-width: 720px) {
  .app {
    flex-direction: column-reverse;
    position: absolute;
  }
  .app .main {
    height: 90% !important;
    overflow: hidden;
  }
  .app .sidebar {
    height: 45px !important;
    width: 100% !important;
  }
  .nav-content {
      display: none;
  }
  .mycard {
    display: flex;
  }
  .navbar {
    width: 100% !important;
  }
  .nav-content2 {
    display: none;
  }
  .change,.out {
    display: none !important;
  }
  .actives {
    background-image: url('../assets/images/active.jpg');
    background-size: 50px 50px;
  }
  .nav-l {
    margin: 0 !important;
    width: 15px;
    height: 15px;
    position: relative;
    top: 10px !important;
  }
  .navbar a {
    height: 50px !important;
    position: relative;
    top: 0.4vh;
  }
  .mycard .navbar {
    display: flex;
    justify-content: space-between;
  }
  .mycard {
    display: flex;
    align-items: center;
  }
  .mycard .icon {
    margin-top: 0 !important;
  }
  .out {
    display: none;
  }
  .el-drawer__header {
    margin-bottom: 0 !important;
  }
  .message .header {
    margin-top: -10px;
    height: auto !important;
    padding: 0 30px 20px !important;
  }
  .message .header .friendname {
    margin-top: -10px;
    width: 200px;
  }
}
</style>

